<template>
  <cloudPage>
    <cloudHeader slot="gHeader">
      <view class="grace-header-body" style="background: rgb(52, 58, 69)">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" @tap.stop="handleNavBack"
          >&#xe600;</view
        >
        <!-- 中间内容 -->
        <view class="grace-header-content-noflex grace-text-center font-32">{{
          $t("wallet.withdraw")
        }}</view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="gBody">
      <view class="grace-relative head">
        <view class="font-60 color-w tips">{{
          $t("wallet.transferPage.withdrawSuccess")
        }}</view>
        <image src="/static/wallet/transfer_success_head.png" class="head-bg" />
        <image src="/static/wallet/transfer_success_icon.png" class="tips-bg" />
      </view>

      <view class="main">
        <view class="item grace-flex grace-space-between b-t-e">
          <view class="font-30 color-w">{{
            $t("wallet.transferPage.outSymbol")
          }}</view>
          <view class="font-30 color-grey">{{ options.symbol }}</view>
        </view>
        <view class="item grace-flex grace-space-between b-t-e">
          <view class="font-30 color-w">{{
            $t("wallet.transferPage.outNum")
          }}</view>
          <view class="font-30 color-grey"
            >{{ options.num }} {{ options.symbol }}</view
          >
        </view>
        <view class="item grace-flex grace-space-between">
          <view class="font-30 color-w">{{
            $t("wallet.transferPage.outDate")
          }}</view>
          <view class="font-30 color-grey">{{ options.date }}</view>
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
export default {
  data() {
    return {
      options: {},
    };
  },
  onLoad: function (options) {
    this.options = options;
  },
  methods: {},
};
</script>

<style scoped>
.head {
  width: 750rpx;
  height: 327rpx;
}
.head .tips {
  width: 100%;
  position: absolute;
  left: 0;
  top: 80rpx;
  text-align: center;
  z-index: 999;
}
.head .head-bg {
  width: 750rpx;
  height: 327rpx;
  position: absolute;
  left: 0;
  top: 0;
}
.head .tips-bg {
  width: 140rpx;
  height: 140rpx;
  position: absolute;
  left: 305rpx;
  bottom: -30rpx;
}

.main {
  margin-top: 130rpx;
  padding: 0rpx 80rpx;
}

.main .item {
  height: 80rpx;
  line-height: 80rpx;
}

.logs-btn {
  position: absolute;
  left: 75rpx;
  bottom: 80rpx;
}
</style>
